<template>
  <div>
    这是一个父组件num1: {{ num1 }}
    这是一个父组件num2: {{ num2 }}
    <hr>
    <br>
    <!-- <Son v-model="num" /> -->
    <!-- v-model：是语法糖的写法，可以实现组件数据的双向绑定，等同如下写法 -->
    <!-- <Son :value="num" @input="val=> num = val" /> -->

    <!-- sync是一个语法糖的写法
    作用：可以在一个组件上双向绑定多个值， v-model只能绑定一个值
     -->
    <Son :abc.sync="num1" :cbd.sync="num2" />
    <!-- 等同于如下写法 -->
    <Son
      :abc="num1"
      :cbd="num2"
      @update:abc="val => num1=val"
      @update:cbd="val=> num2 = val"
    />

  </div>

</template>

<script>
import Son from './Son.vue'
export default {
  components: {
    Son
  },
  data() {
    return {
      num1: 100,
      num2: 200
    }
  },
  methods: {
  }
}
</script>

<style>

</style>
